<template>
  <view class="home">
    <!-- 轮播图 -->
    <swiper indicator-dots autoplay circular :interval="2000" indicator-color="#fff" indicator-active-color="#C00000">
      <swiper-item v-for="(item,index) in imgList" :key="index">
        <view class="pic">
          <image :src="item.image_src" @click="goDetail(item.goods_id)"/>
        </view>
      </swiper-item>
    </swiper>
    
    <!-- 分类导航 -->
    <view class="nav-list">
      <view class="nav-item" v-for="(item,index) in categories" :key="index" @click="goCategory(item)">
        <image :src="item.image_src"/>
      </view>
    </view>
    <!-- 楼层区域 -->
    <view class="floor-list">
      <view class="floor-item" v-for="(item, index) in floorList" :key="index">
        <image :src="item.floor_title.image_src" class="floor-title" />
        <!-- 图片区域 -->
        <view class="floor-img-box">
          <!-- 左侧图片 -->
          <view class="left-img-box" @click="goGoodsList(item.product_list[0].navigator_url)">
            <image :src="item.product_list[0].image_src" class="left-img" :style="{width : item.product_list[0].image_width + 'rpx'}"/>
          </view>
          
          <!-- 右侧图片 -->
          <view class="right-img-box">
            <view class="right-img-item" v-for="(ele,num) in item.product_list" :key="num" v-if="num !== 0" @click="goGoodsList(ele.navigator_url)">
              <image :src="ele.image_src" :style="{width: ele.image_width + 'rpx'}" mode="widthFix"/>
            </view>
          </view>
        </view>
      </view>
    </view>
    
  </view>
</template>

<script>
  import toast from "@/utils/toast.js"
  import { getBanners, getCategory, getFloor } from "@/api/home.js"
  export default {
    data() {
      return {
        imgList:[],
        categories:[],
        floorList:[]
      };
    },
    methods:{
     async getImages() {
        const res = await getBanners()
        toast("请求成功了哦~","success",1000)
        this.imgList = res.message
      },
      goDetail(id) {
        uni.navigateTo({
          url:'/subpkg/goods_detail/goods_detail?goods_id=' + id
        })
      },
      async getNav() {
        const res = await getCategory()
        this.categories = res.message
      },
      goCategory(item) {
        if(item.name === '分类') {
          uni.switchTab({
              url:'/pages/category/category'
            })
          }
        },
        async getFloor() {
          const res = await getFloor()
          console.log(res);
          this.floorList = res.message
        },
        goGoodsList(url) {
          uni.navigateTo({
            url:'/subpkg/goods_list/goods_list?' + url.split('?')[1]
          })
        }
    },
    onLoad() {
      this.getImages()
      this.getNav()
      this.getFloor()
    }
  }
</script>

<style lang="scss" scoped>
.home{
   swiper {
      height: 330rpx;
     .pic,image{
       width: 100%;
       height: 100%;
     }
   }
   .nav-list {
     margin-top: 25rpx;
      display: grid;
      grid-template-columns:repeat(4, 1fr);
      justify-items: center;
      image{
        width: 128rpx;
        height: 140rpx;
      }
   }
    
    .floor-list{
      margin-top: 20px;
     .floor-item {
       margin-top: 5px;
       .floor-title {
         display: flex;
         width: 100%;
         height: 60rpx;
       }
       .floor-img-box {
         margin-top: 5px;
         display: flex;
         padding-left: 10rpx;
         .left-img {
         	height: 392rpx !important;
         }
         .right-img-box {
           display: flex;
           flex-wrap: wrap;
           justify-content: space-around;
         }
       }
     }
    }
}
</style>
